<template>
  <el-container>
    <el-aside width="201px">
      <h5 class="title">列车管理系统</h5>
      <el-menu :default-active="this.$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        background-color="#2C3B45" text-color="#fff" active-text-color="#ffd04b" unique-opened :router="true">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-map-location"></i>
            <span>铁路基本信息</span>
          </template>
          <el-menu-item index="/admin/station">车站信息管理</el-menu-item>
          <el-menu-item index="/admin/authority">铁路局信息管理</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-document"></i>
            <span>火车基本信息</span>
          </template>
          <el-menu-item index="/admin/train">火车信息管理</el-menu-item>
          <el-menu-item index="/admin/price">里程价格管理</el-menu-item>
        </el-submenu>
        <el-menu-item index="/admin/trainNumber">
          <template slot="title">
            <i class="el-icon-s-ticket"></i>
            <span>火车车次信息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/admin/adminInfo">
          <template slot="title">
            <i class="el-icon-user"></i>
            <span>管理员账户信息</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <el-card class="div-header">
          <span style="font-weight: bold;margin-left: 400px; font-size: large;">你好，来自<span class="authority">{{ railway.railwayName
          }}</span>的管理员，欢迎使用列车管理系统</span>
          <el-dropdown style="margin-left: 335px;">
            <span class="el-dropdown-link">
              {{ adminInfo.administratorAccount }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>账户信息</el-dropdown-item>
              <el-dropdown-item @click.native="exit">注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-card>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
  
<script>
export default {
  name: 'adminHome',
  data() {
    return {
      adminInfo: {},
      railway: {},
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    back() {
      this.$router.push({ name: "adminHome" })
    },
    exit() {
      sessionStorage.clear()
      this.$router.push("/adminLogin")
    },
    getAuthority() {
      this.request.get("/authority/getAuthority/" + this.adminInfo.railwayAuthority).then(
        response => {
          if (response.data.code === 1) {
            this.railway = response.data.data
          }
        },
        error => {
          console.log(error);
        }
      )
    }
  },
  mounted() {

  },
  created() {
    this.adminInfo = JSON.parse(sessionStorage.getItem('admin_info'))
    this.getAuthority()
  },
}
</script>
  
<style scoped>
.el-menu {
  min-height: 93vh;
}


.title {
  display: flex;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 200px;
  background-color: #2C3B45;
  color: #fafafa;
}

.div-header {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

::v-deep .el-header {
  padding: 0px;
}

.item {
  margin: 4px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.authority {
  background-image: -moz-linear-gradient(135deg, rgb(231, 35, 185), rgb(49, 25, 230));
  background-image: -webkit-linear-gradient(135deg, rgb(231, 35, 185), rgb(49, 25, 230));
  background-image: linear-gradient(135deg, rgb(231, 35, 185), rgb(49, 25, 230));
  color: #fcfcfc;
}
</style>